<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-13 14:26:02
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-14 15:39:35
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: 服务机构
-->
<template>
  <view class="container_page">

    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" @search="btn_search()" />

    <view class="page">
      <!-- 头部搜索 -->
      <view class="header ">
        <picker mode="selector" class="selector" :range="typeRange" range-key="label" @change="selector_type($event)">
          <view class="content hightLight" :style="{ color: searchObject.serverType ? '#335ac6' : '#999' }">{{
            searchObject.serverType || '请选择服务类别' }}
          </view>
        </picker>

        <input class="content" v-model="searchObject.mainWords" placeholder="请输入关键字" @keyup.enter="btn_search()" />
      </view>

      <!-- 主题内容显示 -->
      <view class="main">
        <!-- 每条数据 -->
        <view class="bar" @click="toForm(bar)" v-for="bar, i in viewData" :key="i" v-html="bar.name">
        </view>
      </view>
    </view>

  </view>
</template>
<script>
import ScrollViewY from '@/components/scrollViewY/index.vue'
import { serviceTypeList } from '@/utils/dictList.js'
let _ = require('lodash')

export default {
  components: { ScrollViewY },
  data() {
    return {
      // 导航栏参数
      navOptions: {
        left: {
          icon: 'back'
        },
        center: {
          title: "技术服务项目"
        },
      },
      viewData: [], // 展示的数据，搜索到、或所有数据
      searchObject: {
        serverType: '维护保养检测',
        serverValue: '',
        mainWords: '' //
      },
      typeRange: [
        { label: '维护保养检测', value: '1' },
        { label: '消防安全评估', value: '2' }
      ],
      // 项目负责人列表
      leaderList: [],
      // 执业人员列表
      practitionersList: [],
      // 服务类型
      serviceTypeList,
      loading: false,
    }
  },
  onLoad(e) {
    this.serviceTypeList.forEach(item => {
      if (item.value == e.serviceType) this.searchObject.serverType = item.text
    })
    this.getInfoList(e.serviceType)
  },
  methods: {
    getInfoList(e) {
      if (this.loading) return
      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });

      let data = {
        pageNo: 1,
        pageSize: 20,
        serviceType: e,
        system: 'app',
        mainWords: this.searchObject.mainWords
      }
      this.$store.dispatch('getTaskList', data)
        .then(({ data }) => {
          this.viewData = data.items
        })
        .finally(() => {
          this.loading = false
          uni.hideLoading();
        })
    },
    // 获取项目负责人-技术负责人-执业人员列表信息
    getLeaderListInfo() {
      let data = {
        pageNo: 1,
        pageSize: 100000,
        personType: '1',
        system: 'app',
      }
      // 获取项目负责人-技术负责人列表
      this.$store.dispatch('getLeaderList', data).then(res => {
        this.leaderList = res.data?.items
      })
      // 获取执业人员列表
      data.personType = '2'
      this.$store.dispatch('getLeaderList', data).then(res => {
        this.practitionersList = res.data?.items
      })
    },

    // 机构类别选择
    selector_type(e) {
      this.searchObject.serverValue = this.typeRange[e.detail.value].value
      this.searchObject.serverType = this.typeRange[e.detail.value].label
      this.getInfoList(this.searchObject.serverValue)
    },

    // 跳往 表单页面
    toForm(row) {
      uni.navigateTo({
        url: '../../pages_workTableChild/projectManage/form?id=' + row.projectId
      })
    },


    // 前端 本地搜索
    btn_search() {
      // 搜索前 先恢复
      this.restoreData()
      const mainWords = this.searchObject.mainWords.toLocaleLowerCase()

      if (mainWords) {
        let replaceReg = new RegExp(mainWords, 'ig')
        const allData = _.cloneDeep(this.viewData)

        // 过滤
        let result = allData.filter(row => {

          // 在名字里搜索
          if (row.name.includes(mainWords)) {
            // 将关键词高亮
            row.name =
              row.name.replace(
                replaceReg,
                `<span style="color: #335ac6;font-weight: bolder;">${mainWords}</span>`
              )
            return row
          }
        })

        // 去重
        this.viewData = Array.from(new Set(result))
      } else {
        this.restoreData()
      }
    },

    // 重置显示数据
    // todo 待处理需求逻辑
    restoreData() {
      this.viewData = _.cloneDeep(this.viewData)
    }
  },
  mounted() {
    this.restoreData()
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

::v-deep .input-placeholder {
  font-size: 28rpx;
  text-align: right;
}

::v-deep .uni-input-input {
  text-align: right;
}

.container_page {
  min-height: 100vh;

  .hightLight {
    color: #fff !important;
    font-weight: bolder;
  }

  .page {
    width: 100%;
    height: calc(100% - 80rpx);
    background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;

    .header {
      display: flex;
      width: 100%;
      margin: 0 auto 24rpx;
      height: 110rpx;
      display: flex;
      align-items: center;
      position: fixed;
      top: 80rpx;
      z-index: 9;
      padding: 0 20rpx;
      background-color: transparent;

      .selector {
        width: 40%;
      }

      .content {
        flex: 1;
      }
    }


    .main {
      min-height: calc(100vh - 80rpx);

      .bar {
        width: calc(100% - 40rpx);
        margin: 0 auto 24rpx;
        background-color: #fff;
        height: 100rpx;
        display: flex;
        align-items: center;
        border-radius: 20rpx;
        padding: 0 24rpx;

        &:active {
          background: rgba(51, 90, 198, 0.3);
        }
      }
    }
  }
}
</style>